<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :error-type="['toast']" labelWidth="80">
			<u-form-item label="手机号:" prop="phone" borderBottom>
				<u-input placeholder="请输入手机号" v-model="form.phone" />
			</u-form-item>
			<u-form-item label="验证码:" prop="code" borderBottom>
				<u-input placeholder="请输入验证码" v-model="form.code" />
				<u-button slot="right" type="default" @click="getCode" size="small" color="linear-gradient(to right, #6e81f3, #3057be);">{{ time }}</u-button>
			</u-form-item>
			<u-form-item label="密码:" prop="password" borderBottom>
				<u-input placeholder="请输入要重置的密码" v-model="form.password" />
			</u-form-item>
			<u-form-item label="确认密码:" prop="password2" borderBottom>
				<u-input placeholder="请确认密码" v-model="form.password2" />
			</u-form-item>
		</u-form>
		<button class="kefu" type="default" open-type="openSetting">在线客服</button>
<!-- 		<button class="kefu" type="default" open-type="contact" @contact="contacts">在线客服</button> -->
		<view style="height: 200rpx"></view>
		<view style="width: 70%;margin: 0 auto;">
			<u-button type="primary" @click="submit">确定</u-button>
		</view>
	</view>
</template>
<script>
import { toast, useRouter } from '@/utils/utils.js';
export default {
	data() {
		return {
			baseInfo: {
				phone: ''
			},
			form: {
				phone: '',
				code: '',
				password: '',
				password2: ''
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur,change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				code: [
					{
						required: true,
						min: 4,
						type: 'number',
						message: '验证码格式错误',
						trigger: 'change'
					}
				],
				password: [
					{
						required: true,
						min: 6,
						message: '请输入密码',
						trigger: 'change'
					}
				]
			},
			seconds: 60,
			refCode: null,
			time:'获取验证码',
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {},
	methods: {
		submit() {
			this.$refs.uForm.validate((valid) => {
				if (valid) {
					//验证通过，执行TODO
					this.$api.forgetPassWord(this.form).then((res) => {
						if (res.code == 0) {
							toast(res.msg);
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						} else {
							toast(res.msg);
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		},
		getCode() {
			//获取验证码
			let data = {
				phonenumber: this.form.phone,
				openId: getApp().globalData.openId
			};
			let time = 60;
			this.time=time + 'S'
			this.disabled= true
			let interval = setInterval(()=> {
				time--;
				this.time= time + 'S'
				if (time <= 0) {
					clearInterval(interval);
					this.time= '重新发送'
					this.disabled= false
				}
			}, 1000);
			/* this.$user.message(data).then(res => {
				if (res.code == 200) {
					let time = 60;
					this.time=time + 's'
					this.disabled= true
					let interval = setInterval(()=> {
						time--;
						this.time= time + 's'
						if (time <= 0) {
							clearInterval(interval);
							this.time= '重新发送'
							this.disabled= false
						}
					}, 1000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			}); */
		},
		getUserInfo(v){
			console.log(v);
		},
		contacts() {
			/* uni.makePhoneCall({
				phoneNumber: '65667517',
				complete() {}
			}); */
		}
	}
};
</script>

<style lang="less" scoped>
::v-deep .u-button--small {
	height: 36px !important;
	padding: 4px 8px !important;
}
.content {
	padding: 35rpx;
	.kefu {
		margin: 20rpx;
		font-size: 24rpx;
		color: #3057be;
		background: #fff;
		margin-left: 76%;
		width: 24%;
		/* text-align: left;
		height: 20px;
		line-height: 1; */
	}
}

@media (min-width: 768px) {
	::v-deep .u-button--primary {
		font-size: 20rpx !important;
		padding: 30rpx !important;
	}
	::v-deep .u-button--default {
		font-size: 18rpx !important;
		padding: 20rpx !important;
	}
	::v-deep .u-input{
		padding: 20rpx 10rpx !important;
	}
	::v-deep .u-input__content__field-wrapper__field{
		font-size: 20rpx !important;
	}
	::v-deep .u-form-item__body__left__content__label {
		font-size: 20rpx !important;
	}
}
</style>
